import { useState } from "react";
import MarkdownEditor from "@/components/markdown-editor";
import MarkdownPreviewer from "@/components/markdown-previewer";
import { EditTip, SaveTip } from "@/components/button-tips";


export default function CourseIntroduction({ introduction }) {

    const [markdown, setMarkdown] = useState(introduction && introduction.content);
    const [isEditable, setIsEditable] = useState(false);

    function handleEdit(e) {
        e.preventDefault();
        setIsEditable(!isEditable);
    }

    return (
        <div className="card">
            <div className="card-header">
                <div className="d-flex justify-content-end align-items-center">
                    <button type="button" onClick={handleEdit} className="btn btn-light ">{isEditable ? <SaveTip /> : <EditTip />}</button>
                </div>
            </div>
            {isEditable ? <MarkdownEditor initialMarkdown={markdown} setMarkdown={setMarkdown} /> : <MarkdownPreviewer markdown={markdown} />}
        </div >
    )
};
